import React, { useState, useEffect, useCallback } from "react";
import "./index.scss";
import step_1_1 from "@images/imageXHB/guide/tips_01@2x.png";
import step_1_2 from "@images/imageXHB/guide/btn_zdl@2x.png";
import step_1_3 from "@images/imageXHB/guide/btn_zjtg@2x.png";
import step_1_4 from "@images/imageXHB/guide/btn_xyb@2x.png";
import step_2_1 from "@images/imageXHB/guide/tips_02@2x.png";
import step_2_2 from "@images/imageXHB/guide/banner_wqy@2x.png";
import step_2_3 from "@images/imageXHB/guide/tips_03@2x.png";
import step_3_1 from "@images/imageXHB/guide/ic_czq@2x.png";

const GuideMask = props => {
  const [step, setstep] = useState(1);
  const [bigScreen, setbigScreen] = useState(false);

  useEffect(() => {
    if (document.documentElement.clientHeight > 667) {
      console.log('大屏手机')
      setbigScreen(true);
    }
  });

  const handleChangeStep =
    step => {
      if (step == 1) {
        console.log('下一步', props.data);
        if (props.data.hasHistoryStorage == '0') {  //有存单，持仓详情标签zIndex调整
          let tdgDom = document.getElementById("nav-tag-ccxq");
          tdgDom.style.zIndex = "10002";
        }
        setstep(2);
      } else if (step == 2) {
        props.close();
      }
    };

  return (
    <div
      className="xhb-guide-mask"
      style={{ display: props.open ? "block" : "none" }}
    >
      {/* 引导弹窗一 */}
      <div className="step step-1" style={{ opacity: step == 1 ? 1 : 0, display: step == 1 ? 'block' : 'none' }}>
        <p className="title">小辉宝全面升级</p>
        <img className="tip-info" style={{ top: props.data.boardContent ? (bigScreen ? '8.25rem' : '7.85rem') : (bigScreen ? '7.65rem' : '7.26rem') }} src={step_1_1} alt="" />
        <div className="tip-box" style={{ top: props.data.boardContent ? (bigScreen ? '-2.8rem' : '-3.2rem') : (bigScreen ? '-3.4rem' : '-3.8rem'), border: `13.2rem solid rgba(0, 0, 0, ${step == '1' ? '0.78' : '0'})` }}></div>
        <img
          className="next"
          src={step_1_4}
          alt=""
          onClick={() => handleChangeStep(1)}
        />
        <img
          className="jump-1"
          src={step_1_3}
          alt=""
          onClick={() => {
            props.close();
          }}
        />
      </div>
      {/* 引导弹窗二 */}
      <div className="step step-2" style={{ opacity: step == 2 ? 1 : 0, display: step == 2 ? 'block' : 'none', background: `rgba(0, 0, 0, ${props.data.hasHistoryStorage == '0' ? '0' : '0.78'})` }}>
        <img className="step-2-tip-info-1" style={{ top: props.data.boardContent ? (bigScreen ? '4.9rem' : '4.5rem') : (bigScreen ? '4.3rem' : '3.9rem') }} src={step_2_1} alt="" />
        {/* 未签约 */}
        {props.data.signStatus == '1' && (
          <img className="step-2-tip-box-1" style={{ top: props.data.boardContent ? (bigScreen ? '7rem' : '6.6rem') : (bigScreen ? '6.4rem' : '6rem') }} src={step_2_2} alt="" />
        )}
        {/* 已签约 */}
        {props.data.signStatus == '0' && (
          <div className="step-3-tip-box-1" style={{ top: props.data.boardContent ? (bigScreen ? '7rem' : '6.6rem') : (bigScreen ? '6.4rem' : '6rem') }}>
            <div className="step-3-top">
              <span>已领{props.data.rechargeCardNum}张</span>
            </div>
            <div className="slide-box">
              <span className="slide-bar" style={{ width: `${(1 - (Number(props.data.differRechargeCardAmt) / Number(props.data.rechargeCardAmount))) * 100}%` }}></span>
            </div>
            <p className="step-3-bot">
              还差<strong>{props.data.differRechargeCardAmt}</strong>元即可获取{props.data.rechargeCardAmount}元超市充值卡
            </p>
            <img className="hb" src={step_3_1} alt="" />
          </div>
        )}
        {/* 有存单 */}
        {props.data.hasHistoryStorage == '0' && (
          <React.Fragment>
            <div className="step-2-tip-box-2" style={{ top: props.data.boardContent ? (bigScreen ? '-2.8rem' : '-3.2rem') : (bigScreen ? '-3.4rem' : '-3.8rem'), border: `13.2rem solid rgba(0, 0, 0, ${step == '2' ? '0.78' : '0'})` }}></div>
            <img className="step-2-tip-info-2" style={{ top: props.data.boardContent ? (bigScreen ? '11.7rem' : '11.3rem') : (bigScreen ? '11.1rem' : '10.7rem') }} src={step_2_3} alt="" />
          </React.Fragment>
        )}
        <img
          className="next"
          src={step_1_2}
          alt=""
          onClick={() => handleChangeStep(2)}
        />
      </div>
    </div >
  );
};

export default GuideMask;
